<template>
	<view class="flex-col page">
		<view class="wrap relative">
			<u-swiper :list="banner" height="580" name="img"></u-swiper>
		</view>
		<!-- <view class="flex-col justify-start section_3">
			<view class="flex-row group justify-between">
				<view class="flex-col">
					<view @click="toCreate">
						<image class="section_4" src="https://terminator.axu9.com/images/shipinzhizuo.png" mode="">
						</image>
					</view>

					<view @click="toPublish">
						<image class="section_8" src="https://terminator.axu9.com/images/juzhenfabu.png" mode="">
						</image>
					</view>
				</view>
				<view class="flex-col items-end">
					<view @click="toAnli">
						<image class="section_5" src="https://terminator.axu9.com/images/dduibiaoanli.png" mode="">
						</image>
					</view>
					<view @click="toWorks">
						<image class="section_7" src="https://terminator.axu9.com/images/zuopinku.png" mode=""></image>
					</view>
				</view>
			</view>
		</view> -->
		<view class="flex-col justify-start section_3">
			<view class="flex-row group justify-between">
				<view @click="toCreate">
					<image class="section_4" src="https://terminator.axu9.com/images/shuzirenzhizuo.png" mode="">
					</image>
				</view>
						
				<view @click="toWorks">
					<image class="section_7" src="https://terminator.axu9.com/images/zuopinku.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="flex-col group_5" v-for="(item,index) in cateList" :key="index">
			<view class="flex-row justify-between items-center group_6">
				<view class="flex-col items-start group_7">
					<text class="font_4">{{item.title}}</text>
					<image class="shrink-0 image_12 image_13"
						src="https://terminator.axu9.com/images/active_bottom_icon.png" />
				</view>
				<image class="image_10 image_11" src="https://terminator.axu9.com/images/arrow_right_gray.png" />
			</view>
			<view class="flex-row horiz-list group_8">
				<view @click="toDetail(items)" class="flex-col section_9 horiz-list-item"
					v-for="(items,indexs) in item.video" :key="indexs">
					<view class="flex-col self-stretch relative">
						<!-- <video :src="items.video_url" object-fit="fill" style="width: 278rpx;height: 388rpx;border-radius: 30rpx 30rpx 0 0;"></video> -->
						<!-- <image :src="items.image" object-fit="fill"
							style="width: 278rpx;height: 388rpx;border-radius: 30rpx 30rpx 0 0;"></image> -->
						<image v-if="items.title.includes('音色') && items.title.includes('生成')" src="../../static/image/other/index-yinse-poster.jpg" object-fit="fill"
							style="width: 278rpx;height: 388rpx;border-radius: 30rpx 30rpx 0 0;"></image>
						<image v-if="items.title.includes('音频') && items.title.includes('生成')" src="../../static/image/other/index-file-poster.jpg" object-fit="fill"
							style="width: 278rpx;height: 388rpx;border-radius: 30rpx 30rpx 0 0;"></image>
						<image v-if="items.title.includes('视频') && items.title.includes('生成')" src="../../static/image/other/index-create-poster.jpg" object-fit="fill"
							style="width: 278rpx;height: 388rpx;border-radius: 30rpx 30rpx 0 0;"></image>
						<image v-if="items.title.includes('发白')" src="../../static/image/other/index-white-poster.jpg" object-fit="fill"
							style="width: 278rpx;height: 388rpx;border-radius: 30rpx 30rpx 0 0;"></image>
					</view>
					<text class="self-start font_7 text_9 mt-11-5">{{items.title}}</text>
				</view>
			</view>

		</view>
		<view class="flex-col group_10" >
			<view class="flex-row justify-between items-center group_6">
				<view class="flex-col items-start group_7">
					<text class="font_4">{{cateTitle}}</text>
					<image class="shrink-0 image_12 image_13"
						src="https://terminator.axu9.com/images/active_bottom_icon.png" />
				</view>
				<!-- <image class="image_10 image_11" src="https://terminator.axu9.com/images/arrow_right_gray.png" /> -->
			</view>
			<view class="flex-row horiz-list group_9 justify-between">
				<view class="flex-col section_9 horiz-list-item1"
					v-for="(items,indexs) in anLiVideoList" :key="indexs">
					<view class="flex-col self-stretch relative">
						<!-- <video @play="videoPlay" :src="items.video_url" object-fit="fill" style="width: 100%;height: 388rpx;border-radius: 30rpx 30rpx 0 0;"></video> -->
						<video @play="videoPlay" :id="'video'+indexs" :src="items.video_url" object-fit="fill" style="width: 100%;height: 388rpx;border-radius: 30rpx 30rpx 0 0;"></video>
					</view>
					<view @click="toDetail(items)" class="video-title">
						<text class="self-start font_7 text_9 mt-11-5">{{items.title}}</text>
					</view>
					
				</view>
			</view>
		
		</view>
		<!-- 登录弹窗 -->
		<ns-login ref="login" @loginSuccess="loginSuccess"></ns-login>
	</view>
	
	</view>
</template>

<script>
	import nsLogin from "../../components/ns-login/ns-login.vue";
	import {
		getHome
	} from "@/api/home.js"
	import { getIp,getUserinfo } from "@/api/user.js"
	export default {
		components: {
			nsLogin
		},
		data() {
			return {
				banner: [], //banner列表
				cateList: [], //分类列表
				recommandVideoList: [{
						video_url: "https://terminator.axu9.com/video/lhZtoTM3X0Z5NS_ofHTB5GwAIuGp1.mp4",
						title: '维尼小熊造型视频',
						isNew: true,
						useNum: '5.6万'
					},
					{
						video: "https://terminator.axu9.com/video/lhZtoTM3X0Z5NS_ofHTB5GwAIuGp1.mp4",
						title: '维尼小熊造型视频',
						isNew: false,
						useNum: '5.6万'
					},
					{
						video: "https://shops.cg500.com/static/feilong_hb_video.mp4",
						title: '维尼小熊造型视频',
						isNew: false,
						useNum: '5.6万'
					},
					{
						video: "https://shops.cg500.com/static/feilong_hb_video.mp4",
						title: '维尼小熊造型视频',
						isNew: false,
						useNum: '5.6万'
					},
					{
						video: "https://shops.cg500.com/static/feilong_hb_video.mp4",
						title: '维尼小熊造型视频',
						isNew: false,
						useNum: '5.6万'
					},
					{
						video: "https://shops.cg500.com/static/feilong_hb_video.mp4",
						title: '维尼小熊造型视频',
						isNew: false,
						useNum: '5.6万'
					},
					{
						video: "https://shops.cg500.com/static/feilong_hb_video.mp4",
						title: '维尼小熊造型视频',
						isNew: false,
						useNum: '5.6万'
					}
				],
				AIVideoList: [{
						video: "https://shops.cg500.com/static/feilong_hb_video.mp4",
						title: '维尼小熊造型视频',
						isNew: true,
						useNum: '5.6万'
					},
					{
						video: "https://shops.cg500.com/static/feilong_hb_video.mp4",
						title: '维尼小熊造型视频',
						isNew: false,
						useNum: '5.6万'
					},
					{
						video: "https://shops.cg500.com/static/feilong_hb_video.mp4",
						title: '维尼小熊造型视频',
						isNew: false,
						useNum: '5.6万'
					},
					{
						video: "https://shops.cg500.com/static/feilong_hb_video.mp4",
						title: '维尼小熊造型视频',
						isNew: false,
						useNum: '5.6万'
					},
					{
						video: "https://shops.cg500.com/static/feilong_hb_video.mp4",
						title: '维尼小熊造型视频',
						isNew: false,
						useNum: '5.6万'
					},
					{
						video: "https://shops.cg500.com/static/feilong_hb_video.mp4",
						title: '维尼小熊造型视频',
						isNew: false,
						useNum: '5.6万'
					},
					{
						video: "https://shops.cg500.com/static/feilong_hb_video.mp4",
						title: '维尼小熊造型视频',
						isNew: false,
						useNum: '5.6万'
					}
				],
				cateTitle: '',//案例标题
				anLiVideoList: [],//案例视频列表
				top: 62,
				searchValue: '', //搜索关键词
				// indexCurrent: null,
			}
		},
		onShow() {
			// #ifdef MP-WEIXIN
			if(!uni.getStorageSync("userId")){
				uni.hideShareMenu({
				  menus: ['shareAppMessage']
				})
				
			}else {
				
				uni.showShareMenu({
				  withShareTicket: true,
				  menus: ['shareAppMessage']
				})
				this.getUserIp()
			}
			// #endif
			this.getHomeData()
			
		},
		onShareAppMessage: function (res) {
			// #ifdef MP-WEIXIN
			let userId = uni.getStorageSync("userId") ? uni.getStorageSync("userId") : ''
			return {  
			      title: '首页', // 分享标题  
			      path: '/pages/index/index?id=' + userId, // 分享路径，可以带参数  
			      success: function (res) {  
			        // 设置成功  
			      },  
			      fail: function (res) {  
			        // 设置失败  
			      }  
			    } 
			// #endif
		},
		onLoad(options){
			console.log(options,'optiosn')
			const scene = decodeURIComponent(options.scene);
			console.log(scene, 'scene')
			if (scene === 'undefined') {
				console.log('111')
				if(JSON.stringify(options) != '{}'){
					console.log('走了么')
					uni.setStorageSync("parentId",options.id)
				}
				// this.getorder(this.user_id);
			} else {
				console.log(scene,'2222');
				uni.setStorageSync("parentId",scene)
				// this.get_device(scene);
				// this.getorder(this.user_id);
			} 
			
			// if(JSON.stringify(options) != '{}'){
			// 	console.log('走了么')
			// 	uni.setStorageSync("parentId",options.id)
			// }
			
		},
		// onShareTimeline(){},
		methods: {
			// 登录成功
			loginSuccess(){
				this.$refs.login.close()
			},
			// 播放视频
			async videoPlay(e){
				console.log(e,'eeeeeeeeeee')
				let curIdx = e.currentTarget.id;
				let videoContext = wx.createVideoContext(curIdx,this) //这里对应的视频id
				videoContext.play()
				if(!uni.getStorageSync("userId")){
					this.$refs.login.open()
					videoContext.stop()
					return
				}
				let res = await getUserinfo({
					uid: uni.getStorageSync("userId")
				})
				console.log(res.data.level_id)
				var level_id = res.data.level_id;
				if(level_id == 0){
					uni.showToast({
						title: '请先激活用户',
						icon: 'none'
					})
					videoContext.stop()
					return
				}
				this.getUserIp()
				
			},
			// 获取用户ip
			getUserIp(){
				getIp({
					uid: uni.getStorageSync("userId")
				}).then(res => {
					console.log(res,'resresresres')
				})
			},
			// 跳转到视频详情
			toDetail(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pagesHome/videoDetail/index?url=' + item.video_url
				})
			},
			// 获取首页数据
			getHomeData() {
				getHome().then(res => {
					this.banner = res.data.banner;
					this.cateList = res.data.cate;
					this.cateTitle = res.data.video_cate.title;
					this.anLiVideoList = res.data.video;
					// this.anLiVideoList = res.data.cate[0].video;
				}).catch(err => {
					console.log(err, '错误')
				})
			},
			// 跳转到视频创作
			toCreate() {
				uni.switchTab({
					url: '/pages/create/index'
				})
			},
			// 跳转到对标案例
			toAnli() {
				uni.showToast({
					title: '开发中',
					icon: 'none'
				})
			},
			// 跳转到矩阵发布
			toPublish() {
				// uni.showToast({
				// 	title: '开发中',
				// 	icon: 'none'
				// })
			},
			// 跳转到我的作品库
			toWorks() {
				if(!uni.getStorageSync("userId")){
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(()=>{
						uni.switchTab({
							url: '/pages/mine/index'
						})
					},1000)
					
					return
				}
				uni.navigateTo({
					url: '/pagesMine/worksLibrary/index'
				})
			}
		}
	}
</script>

<style>
	@import url(../../static/css/common.css);



	.mt-11-5 {
		margin-top: 23rpx;
	}

	page {
		background-color: #f7f8fa;
	}

	.page {

		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		padding-bottom: 100rpx;
	}



	.section_3 {
		padding: 40rpx 0;
		background-image: linear-gradient(0deg, #f7f8fa 0%, #e3fcf9 100%);
	}

	.group {
		padding: 26rpx;
	}

	.section_4 {
		width: 330rpx;
		height: 230rpx;
		margin-bottom: 20rpx;
	}

	.section_8 {
		height: 138rpx;
		width: 330rpx;
	}


	.section_7 {
		height: 229rpx;
		width: 330rpx;
	}



	.section_5 {
		width: 330rpx;
		height: 141rpx;
		margin-bottom: 20rpx;
	}



	.group_5 {
		padding-left: 29rpx;
		padding-top: 6rpx;
	}

	.group_6 {
		padding: 0 5rpx;
	}

	.group_7 {
		height: 40rpx;
	}

	.font_4 {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 29rpx;
		color: #111111;
	}

	.image_12 {
		width: 87rpx;
		height: 22rpx;
	}

	.image_13 {
		margin-left: 9rpx;
		margin-top: -11rpx;
	}

	.image_10 {
		width: 11rpx;
		height: 20rpx;
	}

	.image_11 {
		margin-right: 28rpx;
	}

	.horiz-list {
		margin-top: 17rpx;
	}

	.group_8 {
		overflow-x: scroll;
		padding-bottom: 30rpx;
	}
	.group_9 {
		flex-wrap: wrap;
	}
	.group_10 {
		padding-left: 29rpx;
		padding-top: 6rpx;
		padding-right: 29rpx;
	}
	.horiz-list-item1 {
		
		background-color: #ffffff;
		border-radius: 24rpx;
		width: 47%;
		margin-bottom: 30rpx;
		/* margin-right: 20rpx; */
	}

	.section_9 {
		flex-shrink: 0;
	}
	.video-title {
		height: 100%;
		padding-bottom: 36rpx;
	}

	.horiz-list-item {
		padding-bottom: 36rpx;
		background-color: #ffffff;
		border-radius: 24rpx;
		width: 278rpx;
		margin-right: 20rpx;
	}


	.font_7 {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #111111;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* 限制在一个块元素显示的文本的行数 */
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.text_9 {
		margin-left: 17rpx;
	}
</style>